<!--这个一般是放在页面顶部的一个视频，可以通过页面的滑动收起和出现-->
<template>
    <div v-if="pageShow">
        <!--视频-->
        <div class="header-video-wrap">
            <!--视频播放按钮-->
            <div class="video-play-btn video-btn-position">
                <img class="video-play-btn-img" id="headerVideoBtn" src="../../../assets/images/common/video_play_btn.png"
                     @click="videoBtnClick()">
            </div>
            <video id="headerVideo" class="header-video"
                   x5-playsinline=""
                   webkit-playsinline="true"
                   x-webkit-airplay="true"
                   playsinline
                   :poster="coverImg"
                   x5-video-player-fullscreen='true' x5-video-ignore-metadata='true'
                   @ended="video.video2PlayEnd('headerVideo')">
                <source :src="adVideoUrl" type="video/mp4"/>
            </video>
        </div>
        <div class="video-box-shadow">
            上划收起<span class="assass-bottom"></span>
        </div>
    </div>
</template>

<script>
    import goodDetail from '../../../../static/js/goodDetail'
    import video from '../../../../static/js/Video'
    import xurl from '../../../x/xurl'

    export default {
        name:'headerVideo',
        data() {
            return {
                video:video,
                adVideoUrl: '',
                coverImg: '',
                pageShow: false
            }
        },
        props: {
            actId: {type: Number}, actType: {type: String}
        },
        created() {
            this.initInfo()
            let bool = false
            window.addEventListener("popstate", function (e) {
                if (bool) {
                    video.pause();
                }
            });
            setTimeout(()=> {
                bool = true;
            }, 10);
            goodDetail.shopNamePosition("newsp-nav", "header-video-wrap");
        },
        methods: {
            initInfo() {
                // this.adVideoUrl = 'http://vjs.zencdn.net/v/oceans.mp4';
                // this.coverImg = this.staticImageUrl('images/temp/header_link.jpg');
                // this.pageShow = true
                let url = this.NW_API_vue + '/getAdvertisement/' + this.actId + '/' + this.actType;
                xurl.get(url).then(data => {
                    if (data.success && data.result && Object.keys(data.result).length) {
                        this.adVideoUrl = data.result.adVideoUrl
                        this.coverImg = data.result.coverImg
                        this.pageShow = true
                    }
                })
            },
            //视频1播放
            videoBtnClick() {
                $("#headerVideo")[0].play();
                $("#headerVideo").attr("controls", "controls");
                $(".video-btn-position").hide();
            },
            //video显示
            videoShow() {
                var startY, startX;
                var endY, endX;
                var sliceDiscount;
                var flage = 1;
                var sliceDiscountX;
                if ($(".header-video-wrap").length > 0) {
                    $(".header-video-wrap")[0].addEventListener("touchstart", function (e) {
                        flage = 0;
                    })
                    $(window)[0].addEventListener("touchstart", function (e) {
                        startY = e.touches[0].clientY;
                        startX = e.touches[0].clientX;
                        $(window)[0].addEventListener("touchmove", function (e) {
                            endY = e.touches[0].clientY;
                            endX = e.touches[0].clientX;
                        })
                    })
                    $(window)[0].addEventListener("touchend", function () {

                        sliceDiscount = endY - startY;
                        sliceDiscountX = Math.abs(startX - endX);
                        //视频收起之后向下滑动视频显示
                        //html的top大于0
                        let htmlTop = $("html").offset().top;
                        if (sliceDiscount > 50 && sliceDiscountX < 70 && $("#headerVideo").css("display") == "none" && $(window).scrollTop() <= 0) {
                            $("#headerVideo").slideDown(1000, function () {
                                // this.getBanner();
                            });
                            $(".video-img").show();
                            $(".video-btn-position").fadeIn(1000);
                            //上划收起的字样
                            let text = `上划收起<span class="assass-top"></span>`
                            $('.video-box-shadow').html(text);
                            //					$('html,body').removeClass('ovfHiden'); //使弹窗后网页恢复可滚
                        }
                        //视频出现向上滑动视频隐藏
                        else if (sliceDiscount < 100 && sliceDiscountX < 70 && $("#headerVideo").css("display") != "none" && flage == 1) {
                            $("#headerVideo").slideUp(1000, function () {
                                // this.getBanner();
                                $("#headerVideo")[0].pause();
                            });
                            $(".video-img").hide();
                            $(".video-btn-position").fadeOut(1000);
                            //下划看视频的字样
                            let text = `下划看视频<span class="assass-bottom"></span>`
                            $('.video-box-shadow').html(text);
                            //					$('html,body').removeClass('ovfHiden'); //使弹窗后网页恢复可滚
                        }
                    })
                    //向下滑动视频显示,暂不需要
                    $(window).scroll(function () {
                        if ($("#headerVideo").css("display") == "none" && $(window).scrollTop() <= 0) {
                            $("#headerVideo").slideDown(1000, function () {
                                // this.getBanner();
                            });
                            $(".video-img").show();
                            $(".video-btn-position").fadeIn(1000);
                            //上划收起的字样
                            let text = `上划收起<span class="assass-top"></span>`
                            $('.video-box-shadow').html(text);
                        }
                    })
                    $(".header-video-wrap")[0].addEventListener("touchend", function (e) {
                        setTimeout(()=> {
                            flage = 1;
                        }, 10)

                    })
                }
            },
        },
        watch:{
            pageShow:function (val) {
                if(val){
                    this.videoShow();
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import url($css_root + 'css/retail-goodsDetails.css');
</style>
